<template>
  <div>
    这是测试页面
    <el-button v-btn-permi:add type="primary" size="default">新增</el-button>
    <el-button v-btn-permi:zidingyi type="primary" size="default">权限测试按钮2</el-button>

    <el-input v-model="treeNodes" placeholder="设置treeid,逗号隔开" size="normal" clearable />

    <el-card shadow="always" style="margin: 30px;width: 400px;">
      <div slot="header">
        <span>树</span>
      </div>
      <el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" show-checkbox highlight-current />
      <hr>
      <el-button type="primary" size="default" @click="getCheckedNodes">获取全选节点</el-button>
      <el-button type="primary" size="default" @click="getHalfCheckedNodes">获取半选节点</el-button>
      <el-button type="primary" size="default" @click="setCheckedKeys">设置节点</el-button>

    </el-card>

  </div>
</template>

<script>
export default {
    data() {
        return {
            testIndex: {},
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            treeNodes: '',
            treeData: [
                {
                    id: '1',
                    label: '一级 1',
                    children: [{
                        id: '1-1',
                        label: '二级 1-1',
                        children: [{
                            id: '1-1-1',
                            label: '三级 1-1-1'
                        },
                        {
                            id: '1-1-2',
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: '2',
                    label: '一级 2',
                    children: [{
                        id: '2-1',
                        label: '二级 2-1',
                        children: [{
                            id: '2-1-1',
                            label: '三级 2-1-1'
                        }]
                    }, {
                        id: '2-2',
                        label: '二级 2-2',
                        children: [{
                            id: '2-2-1',
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    id: '3',
                    label: '一级 3',
                    children: [{
                        id: '3-1',
                        label: '二级 3-1',
                        children: [{
                            id: '3-1-1',
                            label: '三级 3-1-1'
                        }]
                    }, {
                        id: '3-2',
                        label: '二级 3-2',
                        children: [{
                            id: '3-2-1',
                            label: '三级 3-2-1'
                        }]
                    }]
                }
            ]
        }
    },
    methods: {
        getCheckedNodes() {
            var checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
            console.log(checkedNodes)
        },
        getHalfCheckedNodes() {
            var checkedNodes = this.$refs.tree.getHalfCheckedNodes()
            console.log(checkedNodes)
            console.log(this.$refs.tree.getNode('1'))
        },
        setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([])
            var keys = this.treeNodes.split(',')
            this.$refs.tree.setCheckedKeys(keys)
        }

    }
}
</script>

<style>

</style>
